<template>
    <div class="my-score">
        <AppHeader bg="transparent" :color-reverse="true">我的战绩</AppHeader>
        <div class="share-button" @click="share" v-if="!$route.params.share">晒战绩</div>
        <div class="body">
            <div class="title">我的战绩</div>
            <div class="brief">
                <div class="block">
                    <div class="money">
                        <span class="big">{{inputBig}}</span>.<span class="small">{{inputSmall}}</span>
                    </div>
                    <div class="tag">累计投入(元)</div>
                </div>
                <div class="block">
                    <div class="money">
                        <span class="big">{{earnBig}}</span>.<span class="small">{{earnSmall}}</span>
                    </div>
                    <div class="tag">累计赚取(元)</div>
                </div>
                <div class="block">
                    <div class="money">
                        <span class="big">{{score.total}}</span>
                    </div>
                    <div class="tag">成功打卡(天)</div>
                </div>
            </div>
            <div class="detail">
                <div class="d-title"><img src="../assets/image/bar.png">每日结算金额将于18:00前到账钱包</div>
                <SignCard v-for="(item, index) in detailList" :key="index" :info="item"></SignCard>
            </div>
        </div>
    </div>
</template>

<script>
    import AppHeader from '../components/AppHeader';
    import SignCard from "../components/SignCard";
    import httpService from "../helper/httpService";
    import {getUrlParam} from "../util";

    export default {
        name: "MyScore",
        components: {
            SignCard,
            AppHeader
        },
        data() {
            return {
                score: {
                    input: 0,
                    earn: 0,
                    total: 0
                },
                detailList: []
            };
        },
        computed: {
            inputBig() {
                return this.score.input.toFixed(2).split('.')[0]
            },
            inputSmall() {
                return this.score.input.toFixed(2).split('.')[1]
            },
            earnBig() {
                return this.score.earn.toFixed(2).split('.')[0]
            },
            earnSmall() {
                return this.score.earn.toFixed(2).split('.')[1]
            }
        },
        methods: {
            init() {
                let promise;
                if (this.$route.params.share) {
                    promise = httpService.get('/signin/otherslistsignin', {
                        idcardseqno: (getUrlParam().idcardseqno || '').split('/')[0]
                    });
                } else {
                    promise = httpService.get('/signin/listsignin');
                }
                promise.then(res => {
                    this.score.earn = res[0].bonusGrandTotal;
                    this.score.input = res[0].signGrandTotal;
                    this.score.total = res[0].count;
                    this.userId = res[0].userId;
                    if (res.length <= 1 && res[0].signDeposit == null) {
                        this.detailList = [];
                        return;
                    }
                    this.detailList = res.map(item => {
                        return {
                            status: item.isSignin ? '1' : '0',
                            time: item.signDatetime && item.signDatetime.slice(0, 10),
                            money: item.isSignin ? item.signBonus : '1'
                        }
                    });
                });
            },
            share() {
                const url = location.origin + '?idcardseqno=' + (this.userId || '') + '#/my-score/share';
                window.navtiveDevice.share('我的战绩', '我的战绩', url);
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style lang="scss" scoped>
    .my-score {
        height: 100vh;
        background: url("../assets/image/zhanji-bg.png");
        background-size: 100% 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        .share-button {
            position: absolute;
            width: 80/3.75+vw;
            height: 40/3.75+vw;
            line-height: 40/3.75+vw;
            text-align: center;
            right: -10/3.75+vw;
            top: 115/3.75+vw;
            background: #0C67FE;
            color: #fff;
            border-bottom-left-radius: 40/3.75+vw;
            border-top-left-radius: 40/3.75+vw;
            font-size: 14/3.75+vw;
            z-index: 3;
        }
        .body {
            flex: 1;
            overflow: auto;
            overflow-scrolling: touch;
            padding: 10/3.75+vw;
            .title {
                font-size: 36/3.75+vw;
                color: #fff;
                margin-top: 20/3.75+vw;
                text-align: center;
            }
            .brief {
                margin-top: 10/3.75+vw;
                display: flex;
                background: #fff;
                padding: 32/3.75+vw 10/3.5+vw;
                align-items: center;
                justify-content: space-around;
                border-radius: 5/3.75+vw;
                position: relative;
                .block {
                    width: 33%;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .money {
                        .big {
                            font-size: 20/3.75+vw;
                            color: #000;
                        }
                        .small {
                            font-size: 12/3.75+vw;
                            color: #333;
                        }
                    }
                    .tag {
                        color: #999;
                        font-size: 14/3.75+vw;
                        margin-top: 10/3.75+vw;
                    }
                }
                &:after {
                    content: '\20';
                    position: absolute;
                    left: 50/3.75+vw;
                    bottom: -30/3.75+vw;
                    width: 12/3.75+vw;
                    height: 49/3.75+vw;
                    background: url('../assets/image/connect.png');
                    background-size: 100% 100%;
                    z-index: 5;
                }
                &:before {
                    content: '\20';
                    position: absolute;
                    right: 50/3.75+vw;
                    bottom: -30/3.75+vw;
                    width: 12/3.75+vw;
                    height: 49/3.75+vw;
                    background: url('../assets/image/connect.png');
                    background-size: 100% 100%;
                    z-index: 5;
                }
            }
            .detail {
                margin-top: 10/3.75+vw;
                padding: 20/3.75+vw;
                background: #fff;
                border-radius: 5/3.75+vw;
                position: relative;
                .d-title {
                    padding: 20/3.75+vw 0 10/3.75+vw;
                    color: #666;
                    font-size: 13/3.75+vw;
                    vertical-align: middle;
                    img {
                        width: 8/3.75+vw;
                        vertical-align: middle;
                        margin-right: 5/3.75+vw;
                    }
                }
            }
        }
    }
</style>
